<template>
    <div class="header">
        <van-icon class="icons" name="list-switch" size="23px" />
        <van-search v-model="keyword" shape="round" background="#ff5454" placeholder="请输入搜索关键词" />
    </div>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" class="img" />
        </van-swipe-item>
    </van-swipe>
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    <!--图标内容-->
    <van-grid square>
        <van-grid-item v-for="item in hotcategory" :key="item.title" :icon="item.img" :text="item.title" />
    </van-grid>
    <div class="ms">
        <van-row gutter="20">
            <van-col span="8">
                <van-icon name="point-gift" style="color: red;" />
                华杉秒杀区
            </van-col>
            <van-col span="13">
                <van-icon name="fire-o" color="#ee0a24" style="float: left; padding-right: 10px;" />
                <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" style="color: red;" />
            </van-col>
            <van-col span="3">
                <van-icon name="share-o" style="padding-left: 12px; color: #860606;" />
            </van-col>
        </van-row>
    </div>
    <!--秒杀得商品-->
    <van-grid square style="padding-bottom: 19px;">
        <van-image v-for="item in productmsDb" width="4rem" height="4rem" fit="contain" :src="item.img">
            <span class="title">{{ item.price }}</span>
        </van-image>
    </van-grid>
    <!--商品列表-->
    <div class="promain">
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in productDataList2" :to="({name:'moveproductds',query:{categoryId:item.id}})">
                <van-image style="width:100% ; height:150px ; padding-bottom: 26px;"
                    :src="item.img.split(',')[0]">
                    <span>{{item.name}}</span>
                    <div class="prolist">
                        <img src="https://img12.360buyimg.com/img/s264x76_jfs/t1/47319/8/18410/7823/642bfbcaFb2428c1a/0ec6a2d6acc3f824.png"
                            alt="">
                        <spn style="color: red; padding-left: 5px;">￥{{ item.price }}</spn>
                    </div>
                </van-image>
            </van-grid-item>
          
        </van-grid>
    </div>

    <!--热门商品-->
    <van-cell title="热门商品" icon="location-o" is-link value="更多内容"  style="color: red;"/>
    <van-grid :gutter="10" icon-size="80px" :column-num="3" class="promain">
      <van-grid-item v-for="item in productData" 
        :key="item.title" 
        :icon="item.img" 
        :text="item.title" />
    </van-grid>





    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o" :to="({ name: 'movecategory'})" >分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" :to="({name:'home'})">个人中心</van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">
import { ref , onMounted } from 'vue';
import {ProductApi} from '@/api'
const active = ref(0)
const keyword = ref('')
const time = ref(30 * 60 * 60 * 1000);
const images = [
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/165650/35/42016/82063/65c0a850Fc3dd0275/caf6d7256b4fbc5d.jpg',
    'https://img13.360buyimg.com/n2/s370x370_jfs/t1/237659/18/14715/39547/65f7c7efFaca3663d/be0cc75f571f3ddd.png!q70.jpg',
    'https://img14.360buyimg.com/n2/s370x370_jfs/t1/245176/36/4518/17507/65c1d460F3caa0074/6f1013b0c3726f81.jpg'
];
// 分类图标
const hotcategory = ref([
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png', title: '华杉超市' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png', title: '华杉电器' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png', title: '服饰美妆' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png', title: '充值中心' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png', title: '会员中心' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png', title: '华杉国际' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png', title: '华杉电器' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png', title: '服饰美妆' },
])
const productmsDb = ref([
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/230626/37/2907/135808/6551de47F959dcfa0/ccf3d0ad7d1eda63.jpg', price: '￥15.9' }
    , { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/234550/3/12722/81886/65b74c09F2fed30b8/5bd863a6b57b5373.jpg', price: '￥29.9' }
    , { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/230493/1/13629/90436/65f10d15Fed37b15f/28e52220d585de63.jpg', price: '￥92.9' }
    , { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/114859/17/40512/88190/65250df8Fb461dd8f/e68f316010bc9730.jpg', price: '￥1992.9' }
    , { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/234550/3/12722/81886/65b74c09F2fed30b8/5bd863a6b57b5373.jpg', price: '￥29.9' }

])

const productData = ref([
    { img: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/157494/22/43343/40791/65fb90d7Ff295eb6b/4ae936d4e355f8a2.jpg', title: '苹果pro14' },
    { img: 'https://img13.360buyimg.com/n2/s270x270_jfs/t1/249491/17/2978/52430/65a1030fF14bbd824/8623a7dfb6392312.jpg', title: '苹果Max15' },
     { img: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/157494/22/43343/40791/65fb90d7Ff295eb6b/4ae936d4e355f8a2.jpg', title: '苹果pro14' },
    { img: 'https://img13.360buyimg.com/n2/s270x270_jfs/t1/249491/17/2978/52430/65a1030fF14bbd824/8623a7dfb6392312.jpg', title: '苹果Max15' },
    { img: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/157494/22/43343/40791/65fb90d7Ff295eb6b/4ae936d4e355f8a2.jpg', title: '苹果pro14' },
    { img: 'https://img13.360buyimg.com/n2/s270x270_jfs/t1/249491/17/2978/52430/65a1030fF14bbd824/8623a7dfb6392312.jpg', title: '苹果Max15' },
])

const productDataList = ref([])
const productDataList2= ref([] as any)
onMounted(() => { 
    CallProductApi()
})

const CallProductApi = () => { 
    ProductApi.select.call().then((res: any) => { 
        console.log(res)
        productDataList.value = res
        productDataList2.value = productDataList.value.slice(0, 4);
    })
}

</script>
<style scoped>
.icons {
    float: left;
    margin-top: 15px;
    margin-left: 5px;
    color: aliceblue;
}

.img {
    width: 100%;
    height: 240px;
}

.title {
    color: red;
    padding-left: 5px;
}

.header {
    background-color: #ff5454;
}

.van-image {
    padding-left: 5px;
}

.van-search {
    border-radius: 3px;
}

.van-grid-item__content {
    margin: 0px;
    padding: 0px;
}

/* .promain {
    margin-bottom: 30px;
} */

.prolist {
    padding-top: 3px;
    width: 100%;
}

.prolist img {
    width: 30px;
    height: 20px;
    padding-top: 3px;
    float: left;
}
</style>